<template>
   <!-- 面包屑 -->
           <div class="indexicon">
              <el-radio-group @click="isCollapse">
                <span
                  :class="menuopen?'active':'noactive'"
                  style="margin: 15px;"
                  class="iconfont  icon-mianbaoxie"
                ></span>
              </el-radio-group>
              <el-breadcrumb :separator-icon="ArrowRight">

                <el-breadcrumb-item :to="{ path: '/Index/IndexAbout' }">

                  首页</el-breadcrumb-item>
                <el-breadcrumb-item
                  v-for="item in routelist"
                  :key="item.meta.name"
                >{{item.meta.title}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>

</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue' // 面包屑的向右图标
export default {
  setup() {
     return {
      // 图标是变量就用setup
      ArrowRight // 面包屑的向右图标
    }
  },
  data(){
    return{
       menuopen: true, // 面包屑与左侧菜单展开与折叠的布尔值
       routelist:[]
    }
  },
  created(){
    this.routelist=this.$route.matched.slice(1)
  },
  watch:{
    $route(){
      //监听路由
this.routelist=this.$route.matched.slice(1)
console.log(this.$route.matched,1478787);


console.log(this.routelist,147);
    }
  },
  methods:{
    // 折叠菜单
    isCollapse () {
      //子传父
      this.$emit('WWisCollapse',this.menuopen)
      this.menuopen = !this.menuopen // 折叠菜单布尔值取反
    }
  }
}
</script>

<style lang="less" scoped>
 .indexicon {//面包屑box
 float: left;
     display: flex;
  align-items: center;
  height: 60px;
  font-size: 30px
  // border-bottom: solid 1px rgb(235, 233, 233);

  }
   // 面包屑前面的图标点击样式
.active {
  transform: rotate(180deg);
  transition: all 0.5s;
}
.noactive {
  transform: rotate(0deg);
  transition: all 0.5s;
}
</style>
